<template>
    <basic-container>
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="超时规则" name="first">
                    <div class="ruleSetArea">
                        <el-row>
                        <el-checkbox v-model="ruleSetModel.dutimeCheck">有效</el-checkbox>
                        <div class="ruleUserCol">
                            超时代理人：
                            <template v-if="ruleSetModel.dutimeAgent.length>0">
                                    <el-tag v-for="tag in ruleSetModel.dutimeAgent" :key="tag.userId" effect="plain" 
                                           
                                            style="margin-left: 5px">{{tag.userName}}
                                    </el-tag>
                                    <span class="updateRuleUser" @click="updateRuleUser('dutime')">修改</span>
                            </template>
                            <template v-else>
                                    <span>暂无</span>
                                    <span class="updateRuleUser" @click="updateRuleUser('dutime')">添加</span>
                            </template>
                                
                        </div>
                        
                        </el-row>
                        <!--<el-row>
                        <el-checkbox v-model="ruleSetModel.wcCheck">有效</el-checkbox>
                         <div class="ruleUserCol">
                            外出代理人：
                            <template v-if="ruleSetModel.wcAgent.length>0">
                                    <el-tag v-for="tag in ruleSetModel.wcAgent" :key="tag.userId" effect="plain" 
                                            style="margin-left: 5px">{{tag.userName}}
                                    </el-tag>
                                    <span class="updateRuleUser" @click="updateRuleUser('wc')">修改</span>
                            </template>
                            <template v-else>
                                    <span>暂无</span>
                                    <span class="updateRuleUser" @click="updateRuleUser('wc')">添加</span>
                            </template>
                                
                        </div>
                        
                        </el-row> -->
                    </div>
                    
                    <div :style="{width:'368px',textAlign:'center'}">
                        <el-button type="primary" @click="submitDuTimeData">提 交</el-button>
                    </div>
                
            </el-tab-pane>
            <el-tab-pane label="通知接收" name="second">
                <div :style="{width:'368px'}">
                    <avue-form ref="MesReceForm" v-model="MesReceForm" :option="MesReceFormOption">
                        <template slot-scope="{error}" slot="username">
                            <div>
                               {{userInfo.userName}}({{userInfo.userId}})
                            </div>
                        </template>
                        <template slot-scope="{error}" slot="recType">
                            <div>
                                <el-checkbox v-for="item in messageSetList" v-model="item.checked" :key="item.messageMethod+'12345665431'">
                                    {{item.messageMethod}}
                                </el-checkbox>
                            </div>
                        </template>
                        <template slot="menuForm">
                            <el-button type="primary" @click="submitMessageSetData">提 交</el-button>
                         
                        </template>
                    </avue-form>
                </div>
               
            </el-tab-pane>
            <el-tab-pane label="自动审批" name="three">
                <div class="outsetting-wrapper">
                    <avue-form ref="goOutForm" v-model="goOutForm" :option="goOutFormOption">
                        <template slot-scope="{error}" slot="username">
                            <div>
                               {{userInfo.userName}}({{userInfo.userId}})
                            </div>
                        </template>
                        <template slot-scope="{error}" slot="outTime">
                            <div>
                                <!-- <div class="outTimeCheckBox">
                                <el-checkbox v-model="outTimeCheck">仅在以下时间段内外出</el-checkbox>
                                </div> -->
                                <el-date-picker
                                    v-model="rangeTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            
                        </template>
                        <template slot-scope="{error}" slot="outTimeAgent">
                             <el-row>
                                    <el-checkbox v-model="wcSetModel.wcCheck">有效</el-checkbox>
                                    <div class="ruleUserCol">
                                        <template v-if="wcSetModel.wcAgent.length>0">
                                                <el-tag v-for="tag in wcSetModel.wcAgent" :key="tag.userId" effect="plain" 
                                                        style="margin-left: 5px">{{tag.userName}}
                                                </el-tag>
                                                <span class="updateRuleUser" @click="updateRuleUser('wc')">修改</span>
                                        </template>
                                        <template v-else>
                                                <span>暂无代理人</span>
                                                <span class="updateRuleUser" @click="updateRuleUser('wc')">添加</span>
                                        </template>
                                            
                                    </div>
                                    
                             </el-row>
                        </template>
                       
                        <template slot="menuForm">
                            <el-button type="primary" @click="goOutFormSubmit">提 交</el-button>
                    
                        </template>
                    </avue-form>
                     
                </div>
            </el-tab-pane>
        </el-tabs>
        <select-user ref="selectUser" :visible.sync="selectUserVisible" :appendToBody="true"
                     :multipleSelect="false"
                     :selectUserType="selectUserType"
                     @selectUserFinished="selectUserFinished"></select-user>

        <el-dialog
            title="选择相关人员"
            :visible.sync="setUserDialogVisible"
            width="30%">
                <el-row align="left">
                    <el-col :span="8" align="left">
                        <autoCompleteUserName 
                        @handleSelect="autoCompleteUserNameSelect"
                        ></autoCompleteUserName>
                    </el-col>
                    <el-col :span="1" align="left">
                        <i class="el-icon-plus el-icon--left" style="cursor:pointer" @click="doSelectCcTo"></i>
                    </el-col>
                    <el-col :span="13" align="left">
                        <el-tag v-for="tag in ccToVos" :key="tag.userId" effect="plain" closable
                                @close="handleCcToClose(tag)"
                                style="margin-left: 5px">{{tag.userName}}
                        </el-tag>
                    </el-col>
                </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSelectPeople()">确 定</el-button>
            </span>
        </el-dialog>
    </basic-container>

</template>

<script>
import {mapGetters} from "vuex"
import autoCompleteUserName from '@/components/select/autoCompleteUserName'
import SelectUser from '@/components/select/SelectUser'
export default {
    components: {autoCompleteUserName,SelectUser},
    data(){
        return {
          activeName:'first',
          setUserDialogVisible:false,
          checked:[],
          duTimeForm:{},
          ruleSetModel:{
              dutimeCheck:false,
              dutimeAgent:[],
              wcCheck:false,
              wcAgent:[]
          },
          wcSetModel:{
              wcCheck:false,
              wcAgent:[]
          },
          duTimeFormOption:{
            emptyBtn:false,
            submitBtn:false,
            column: [{
                label: "代理人",
                prop: "agentUser",
                row:true,
                span:24,
                placeholder:'请输入姓名进行搜索',
                formslot:true
            }]
          },
          outTimeCheck:false,
          rangeTime:[],
          messageSetList:[
              {"messageMethod":"Email","timeLong":50,checked:false},
              {"messageMethod":"WeChat","timeLong":50,checked:true}
          ],
          MesReceForm:{},
          MesReceFormOption:{
            emptyBtn:false,
            submitBtn:false,
            column: [{
                label: "帐号",
                prop: "username",
                row:true,
                span:24,
                formslot:true,
                rules: [{
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                }]
            },{
                label: "接收通知",
                prop: "recType",
                span:24,
                formslot:true,
            }]
          },
          goOutForm:{},
          goOutFormOption:{
            emptyBtn:false,
            submitBtn:false,
            column: [{
                label: "帐号",
                prop: "username",
                row:true,
                span:24,
                formslot:true,
                rules: [{
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                }]
            },{
                label: "外出时间",
                prop: "outTime",
                span:24,
                formslot:true,
            },{
                label: "外出代理人",
                prop: "outTimeAgent",
                span:24,
                formslot:true,
            }]
          },
          ccToVos: [],
          selectUserVisible: false,
          selectUserMultipleSelect: false,
          selectUserType: '',
        }
    },
    computed: {
            ...mapGetters(["userInfo"]),
    },
    created(){
        
        this.initReminderDataModel()
        this.getGoOutFormDtl()
        this.getDuTimeData()
    },
    methods:{
        goOutFormSubmit(){
            
            //console.log(this.wcSetModel,'wcSetModel')
            //this.wcSetModel:{"wcCheck":true,"wcAgent":[{"value":"郑胜SDT14316","account":"SDT14316","realName":"郑胜","userName":"郑胜","userId":"SDT14316"}]}
            
            let wcSetModel = this.wcSetModel
            let automaticTransferSimpleDTO = {
                "account":wcSetModel.wcAgent[0].account,
                "name":wcSetModel.wcAgent[0].realName,
                "type":"WC",
                "valid":wcSetModel.wcCheck,
            }

            let data = {
                startTime:this.rangeTime[0],
                endTime:this.rangeTime[1],
                userStatus:'WC',  //只有勾选了才是外出状态
                automaticTransferSimpleDTO
            }
            
            this.postAction('/api/sdt-flow/userworkstatus/submit',data).then(res => {
                if(res.data.success){
                    this.$message.success('操作成功')
                }else{
                    this.$message.error('操作失败')
                }
                //debugger
            })
        },
        updateRuleUser(type){
            this.setUserDialogType = type
            this.setUserDialogVisible = true
        },
        confirmSelectPeople(){
            let data = this.ccToVos
            this.setUserDialogVisible = false
            if(this.setUserDialogType == 'dutime'){
               this.ruleSetModel.dutimeAgent = data
            }else if(this.setUserDialogType == 'wc'){
               this.wcSetModel.wcAgent = data
            }

        },
        getGoOutFormDtl(){
            this.getAction('/api/sdt-flow/userworkstatus/get').then(res => {
                 let data = res.data.data
                 //this.outTimeCheck = data.userStatus
                 this.rangeTime = [data.startTime,data.endTime]
                 if(data.userStatus == "WC"){
                     this.outTimeCheck = true
                 }
                 let automatic = data.automaticTransferSimpleDTO
                 //this.wcSetModel:{"wcCheck":true,"wcAgent":[{"value":"郑胜SDT14316","account":"SDT14316","realName":"郑胜","userName":"郑胜","userId":"SDT14316"}]}
                 let wcCheck = automatic.valid
                 let wcAgent = [{
                     value:automatic.account,
                     account:automatic.account,
                     realName:automatic.name,
                     userName:automatic.name,
                     userId:automatic.account,
                 }]
                 this.wcSetModel = {
                     wcCheck,
                     wcAgent
                 }
                 //debugger
            })
        },
        initReminderDataModel(){
           //messageSetList
           this.getAction('/api/sdt-flow/processreminder/get-reminder').then(res => {
               let data = res.data.data
               if(data.length == 0){
                   this.messageSetList = [
                       {"messageMethod":"Email","timeLong":50,checked:false},
                       {"messageMethod":"WeChat","timeLong":50,checked:false}
                   ]
               }else {
                   this.messageSetList = data
               }
               //debugger
           })
        },
        submitMessageSetData(){
            this.postAction(
                '/api/sdt-flow/processreminder/save',
                this.messageSetList
            ).then(res => {
                 //debugger
                 if(res.data.success){
                     this.$message.success('操作成功')
                 }
            })
        },
        pushCcToVos(data){
               this.ccToVos = []
               data.forEach(ele => {
                   if(this.ccToVos.every(item => {
                        return item.account!=ele.account
                   })){
                       this.ccToVos.push(ele)
                   }
               })
        },
        autoCompleteUserNameSelect(selection){
            // account: "SDT14619"
            // realName: "汤林超"
            // userId: "SDT14619"
            // userName: "汤林超"
            // value: "汤林超SDT14619"
            this.pushCcToVos([selection])
        },
        doSelectCcTo() {
                this.selectUserVisible = true
                this.selectUserType = 'selectCcTo'
                if (this.$refs.selectUser.treeData.length == 0) {
                    this.$refs.selectUser.getTreeData()
                }
        },
        selectUserFinished(selectData,data = null) {
                if (!selectData || selectData.length == 0) {
                    Message.error('请先选择用户')
                    return
                }
                this.pushCcToVos([selectData])
        },
        handleCcToClose(tag) {
                this.ccToVos.splice(this.ccToVos.indexOf(tag), 1);
        },
        
        submitDuTimeData(){
            // if(this.ccToVos.length<1){
            //     this.$message.error('请选择人员')
            //     return
            // }
            // dutimeCheck:false,
            //   dutimeAgent:[]
            
            let ruleSetModel = this.ruleSetModel
            if(ruleSetModel.dutimeCheck){
                if(ruleSetModel.dutimeAgent.length<1){
                    this.$message.error('请选择超时代理人')
                    return
                }
            }
            // if(ruleSetModel.wcCheck){
            //     if(ruleSetModel.wcAgent.length<1){
            //         this.$message.error('请选择外出代理人')
            //         return
            //     }
            // }
            let data = [{
                "account":ruleSetModel.dutimeAgent[0].account,
                "name":ruleSetModel.dutimeAgent[0].realName,
                "type":"CS",
                "valid":ruleSetModel.dutimeCheck,
              },
            //   {
            //     "account":ruleSetModel.wcAgent[0].account,
            //     "name":ruleSetModel.wcAgent[0].realName,
            //     "type":"WC",
            //     "valid":ruleSetModel.wcCheck,
            // }
            ]
            debugger
            // {
            //     account:this.ccToVos[0].account,
            //     name:this.ccToVos[0].userName,
            // }
            this.postAction(
                '/api/sdt-flow/automatictransfer/save-overtime',
                data
            ).then(res => {
                 //debugger
                 if(res.data.success){
                     this.$message.success('操作成功')
                 }
            })
        },
        getDuTimeData(){
            this.getAction(
                '/api/sdt-flow/automatictransfer/get-overtime',
            ).then(res => {
                 debugger
                 if(res.data.success){
                     //account: "SDT13841"
                     //name: "林晓锋"
                    let data = res.data.data
                    data.forEach(item => {
                        if(item.type == 'CS'){
                            this.ruleSetModel.dutimeAgent.push({
                                account: item.account,
                                name: item.name,
                                userId: item.account,
                                userName: item.name,
                            })
                            this.ruleSetModel.dutimeCheck = item.valid
                        }
                        // else if(item.type == 'WC'){
                        //     this.ruleSetModel.wcAgent.push({
                        //         account: item.account,
                        //         name: item.name,
                        //         userId: item.account,
                        //         userName: item.name,
                        //     })
                        //     this.ruleSetModel.wcCheck = item.valid
                        // }
                    })
                    
                 }
            })
        }
    }
}
</script>

<style lang="scss">
    .outTimeCheckBox{
        margin-bottom:6px;
    }
    .outsetting-wrapper{
        width:600px;
    }

    .ruleUserCol{
        display:inline-block;
    }
    .updateRuleUser{
        color: #3886f4;
        font-size: 12px;
        margin-left: 10px;
        cursor:pointer;
    }
    .ruleUserCol{
        font-size: 14px;
        margin-left: 20px;
    }
    .ruleSetArea{
        margin:20px;
        .el-row{
            margin-bottom:12px;
        }
    }
</style>
